import { defineComponent, ref } from "vue";
import styles from "./ToolTab.module.less";
import {
  Film,
  Postcard,
  Setting,
  Switch,
  SwitchFilled,
} from "@element-plus/icons-vue";

export const ToolTab = defineComponent({
  setup(props, ctx) {
    let value1 = ref(true);
    let color = ref("rgba(69, 124, 245, 0.8)");

    return () => (
      <>
        <div class={styles.tool}>
          <div class={styles.colorPick}>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="设置主题色"
              placement="top"
            >
              <div>
                <el-color-picker v-model={color.value} size="small" />
              </div>
            </el-tooltip>
          </div>
          <div class={styles.postcard}>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="证件照"
              placement="top"
            >
              <div>
                <el-icon size="20px" color="white">
                  <Postcard />
                </el-icon>
              </div>
            </el-tooltip>
          </div>
          <div class={styles.postcard}>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="设置行距"
              placement="top"
            >
              <div>
                <el-icon size="20px" color="white">
                  <Film />
                </el-icon>
              </div>
            </el-tooltip>
          </div>
          <div class={styles.postcard}>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="翻译简历"
              placement="top"
            >
              <div>
                <el-icon size="20px" color="white">
                  <SwitchFilled />
                </el-icon>
              </div>
            </el-tooltip>
          </div>
          <div class={styles.postcard}>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="设置CSS"
              placement="top"
            >
              <div>
                <el-icon size="20px" color="white">
                  <Switch />
                </el-icon>
              </div>
            </el-tooltip>
          </div>
          <div class={styles.postcard}>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="设置字体大小"
              placement="top"
            >
              <div>
                <el-icon size="20px" color="white">
                  <Setting />
                </el-icon>
              </div>
            </el-tooltip>
          </div>
        </div>
      </>
    );
  },
});
